<template>
  <page-frame>
    <div class="roomInfo">
      <div class="toptitle">
        <div class="left">房间信息<span class="room-left">*</span></div>
        <div class="right">
          <div class="btns">
            <el-button class="lightGreenBtn" @click="saveInfo">保存全部</el-button>
            <el-button @click="toRoom" class="">返回</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>

      <el-row>
        <el-col :span="9">
          <el-form label-width="100px" v-if="info">
            <div class="room-info-left">房间基本信息 - {{ info.blName }} - {{ info.flName }}</div>
            <el-form-item label="房间类型">
              <el-input v-model="info.rmTypeName" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="房间号">
              <el-input v-model="info.rmNo"></el-input>
            </el-form-item>
            <el-form-item label="房间名称">
              <el-input v-model="info.rmName"></el-input>
            </el-form-item>
            <el-form-item label="房间标准">
              <el-select v-model="info.rmStdId" placeholder="请选择">
                <el-option
                  v-for="item in roomStandardList"
                  :key="item.rmStdId"
                  :label="item.rmStdName"
                  :value="item.rmStdId">
                </el-option>
              </el-select>
              <el-button type="text" class="button-style" @click.prevent="applyStandard" v-show="info.rmStdId">启用标准</el-button>
            </el-form-item>
            <el-form-item label="床位数" v-if="info.rmTypeId === ROOM_TYPE.BEDROOM">
              <el-input class="input-style" v-model="info.bedCount" :disabled="true"></el-input>
              <span class="span-style">张</span>
            </el-form-item>
            <el-form-item label="床位单价" v-if="info.rmTypeId === ROOM_TYPE.BEDROOM">
              <el-input class="input-style" v-model="info.price"></el-input>
              <span class="span-style">￥</span>
            </el-form-item>
            <el-form-item label="面积">
              <el-input class="input-style" v-model="info.rmArea"></el-input>
              <span class="span-style">㎡</span>
            </el-form-item>
            <el-form-item label="朝向">
              <el-select v-model="info.orientation">
                <el-option
                  v-for="(val, key) in ORIENTATION"
                  :label="ORIENTATION_DESC[key]"
                  :value="val"></el-option>
              </el-select>
              <!--<el-input class="input-style" v-model="info.orientation"></el-input>-->
            </el-form-item>
            <el-form-item v-for="(eq, index) in info.rmEq" :label="index === 0 ? '房间配备' : ''">
              <el-input v-model="info.rmEq[index]"></el-input>
              <el-button type="text" class="button-style" @click.prevent="removeEq(index)">删除</el-button>
            </el-form-item>
            <el-form-item>
              <el-input v-model="newEq"></el-input>
              <el-button type="text" class="button-style" @click.prevent="addEq">新增设备</el-button>
            </el-form-item>

          </el-form>

        </el-col>
        <el-col :span="15" v-if="info.rmTypeId === ROOM_TYPE.BEDROOM">
          <bedStatus class="bedEdit" ref="bedStatus"
                          v-if="info.rmTypeId === ROOM_TYPE.BEDROOM"
                          :originBeds="info.beds"
                          @bedCountChange="bedCountChange"
                          @removeBed="removeBed"
          />
        </el-col>
      </el-row>

    </div>

  </page-frame>
</template>

<script>
  import bedStatus from '../../components/room/bedStatus.vue'
  import roomApi from '../../service/corporation/roomApi';
  import {ORIENTATION, ORIENTATION_DESC, ROOM_TYPE, BED_STATUS} from '../../constants/roomConstants'
  export default {
    data () {
      return {
        info: {
          beds: [],
          rmId: "",
          rmNo: "",
          rmStdId: "",
          rmTypeName: "",
          price: "",
          bedCount: "",
          rmArea: "",
          orientation: "",
          rmEq: [],
        },
        roomStandardList: [],
        newEq: "",
        ROOM_TYPE,
        ORIENTATION,
        ORIENTATION_DESC
      }
    },
    methods: {
      init() {
        this.getData();
      },
      getData() {
        roomApi.getRoomStandardListByRmId(this.$route.params.rmId).then(res => {
          this.roomStandardList = res.body.data;
        })
        roomApi.getRoomInfo(this.$route.params.rmId).then(res => {
            this.info = res.body.data;
            this.handleGetData();
        }, res => {});
      },
      handleGetData() {
        this.info.rmEq = this.info.rmEq ? this.info.rmEq.split(",") : [];
      },
      applyStandard() {
        if(this.roomStandardList && this.info) {
          let standard = this.roomStandardList.find(n => {
            return n.rmStdId === this.info.rmStdId;
          });
          if(standard) {
            this.info.price = standard.price;
            this.info.bedCount = standard.bedCount;
            if(this.$refs.bedStatus.beds.length !== 0) {
              this.$alert('当前房间内已有床位，如需启用新标准中的床位信息，请先删除现有床位', '提示', {
                confirmButtonText: '确定',
              });
            } else {
              this.info.beds = [];
              let parseBeds = JSON.parse(standard.bedGeometry);
              for(var item of parseBeds) {
                let obj = {
                  status: BED_STATUS.EMPTY,
                  geometry: JSON.stringify(item)
                }
                this.info.beds.push(obj);
              }
              this.$nextTick(() => {  // 等待dom更新
                this.$refs.bedStatus.init();
              })
            }
            this.info.rmArea = standard.rmStdArea;
            this.info.rmEq = standard.rmEq;
            this.handleGetData();
          }
        }
      },
      addEq() {
        this.info.rmEq.push(this.newEq);
        this.newEq = "";
      },
      removeEq(index) {
        this.info.rmEq.splice(index, 1);
      },
      toRoom(){
        this.$router.push({name: 'room'})
      },
      bedCountChange(count) {
        this.info.bedCount = count;
      },
      removeBed(bedId) {
        let removeIndex = this.info.beds.findIndex((bed) => {
          return bed.bedId === bedId;
        });
        this.info.beds.splice(removeIndex,1);
      },
      saveInfo() {
        let submitObj = Object.assign({}, this.info);
        submitObj.rmEq = this.info.rmEq.join(",");
        submitObj.beds = JSON.parse(JSON.stringify(this.$refs.bedStatus.beds));
        for(var bed of submitObj.beds) {
          bed.geometry = JSON.stringify(bed.geometry);
        }
        roomApi.updateRoomInfo(submitObj).then(res => {
          this.$message({
            type: 'success',
            message: '保存成功!'
          }, res => {});
          this.init();
        }, res => {});
      }
    },
    mounted: function () {
      this.init();
    },
    components: {bedStatus}
  }
</script>
<style>
  .roomInfo .span-style {
    position: absolute;
    margin-left: 5px;
    color: #8391a5
  }

  .roomInfo .button-style {
    width: 75px;
    line-height: 100%;
    position: absolute;
  }

  .roomInfo .input input {
    display: inline-block;
  }

  .roomInfo .room-left {
    font-size: 14px;
    color: red;
    margin-left: 10px;
  }

  .roomInfo .room-info-left {
    margin-top: 60px;
    margin-left: 20px;
    font-size: 24px;
    margin-bottom: 40px;
  }

  .roomInfo .input-style {
    width: 50% !important;
  }
  .roomInfo button.el-button--text span{
    margin-left: -5px;
  }
</style>
